<template>
    <div>
        <div class="row">
            <div class="col">

            </div>
            <div class="col text-right">
                <el-button @click="dialogVisible = true">+创建</el-button>
            </div>
        </div>
        <el-table :data="tableData" height="65vh" style="width: 100%" @sort-change="sortchange">
            <el-table-column prop="ID" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="password" label="密码"></el-table-column>
            <el-table-column prop="description" label="备注"></el-table-column>
            <el-table-column prop="createdAt" sortable="custom" :formatter="({ createdAt }) => formatter(createdAt)"
                label="创建时间"></el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">

                    <el-button type="primary" @click="$router.push({ name: 'device', params: { ID: scope.row.ID } })"
                        size="default">查看</el-button>
                    <el-button type="danger" @click="handleClick(scope.row)" size="default">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange" :page-size="Number(limit)" layout="prev, pager, next"
            :total="count"></el-pagination>
        <el-dialog :title="title" v-model="dialogVisible" width="80%">
            <el-form size="default" :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="organizeid">
                    <el-input v-model="ruleForm.organizeid"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="ruleForm.description"></el-input>
                </el-form-item>

                <div class="row">
                    <div class="col text-right">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { toLocaleDateString } from "../../../util/time";
import {
    asyncgettuyaorganize,
    asynccreateaorganize,
} from "../../../api/index";
import { onMounted, ref, watch } from "vue";
import TuyaiotModel from "../../../mysql_interface/tuyaiotmodel";
import { assign } from "lodash-es";






const dialogVisible = ref(false);
const sortable = ref("DESC");
const limit = ref(20);
const offset = ref(0);
const order = ref("ID");
const like = ref("");
const title = ref("添加");
const ruleForm = ref<TuyaiotModel.ITorganize>(assign({}))
const tableData = ref<TuyaiotModel.ITorganize[]>([]);
const count = ref(0)

onMounted(() => {
    start()
})





async function start() {
    try {
        let z: [keyof TuyaiotModel.ITorganize, any] | undefined;
        if (like.value) {
            z = ["name", like.value];
        }
        const data = await asyncgettuyaorganize({
            _limit: limit.value,
            _offset: offset.value,
            _order: order.value,
            _sortable: sortable.value,
            _like: z,

        });
        tableData.value = data.rows;
        count.value = data.count;
    } catch (e: any) {
        ElMessage.error(e);
    }
}
function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}

function handleClick(row: TuyaiotModel.ITorganize) {
    title.value = "修改";
    ruleForm.value = JSON.parse(JSON.stringify(row));
    dialogVisible.value = true;
}

function sortchange(row: any) {
    const { prop, order } = row;
    if (order == "descending") {
        sortable.value = "DESC";
    } else {
        sortable.value = "ASC";
    }
    order.value = prop;
}
function formatter(updatedAt: string) {
    return toLocaleDateString(updatedAt);
}

async function submit() {
    try {
        await asynccreateaorganize(ruleForm.value);
        ElMessage({
            message: "添加成功",
            type: "success",
        });
        start();
        dialogVisible.value = false;
    } catch (e: any) {
        ElMessage({
            message: e,
            type: "error",
        });
    }
}

</script>
  